import 'dart:io';

import 'package:architecture/os_size.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../generated/assets.dart';
import '../../../widgets/drop_down_text.dart';
import '../../../widgets/icon_text_button.dart';
import '../../../widgets/text_button.dart';
import 'picture_format_change_controller.dart';

class PictureFormatChangePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetX<PictureFormatChangeController>(
        init: PictureFormatChangeController(),
        builder: (controller) {
          return Scaffold(
            appBar: AppBar(title: Text('图片格式转换')),
            body: Container(
                margin: EdgeInsets.all(15),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    _formatAndQuality(controller),
                    SizedBox(
                      height: 15,
                    ),
                    _chooseFile(controller),
                    Row(
                      children: [
                        _choosePicture(controller),
                        SizedBox(
                          width: 20,
                        ),
                        _result(controller)
                      ],
                    )
                  ],
                )),
          );
        });
  }

  _formatAndQuality(PictureFormatChangeController controller) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text('输出格式'),
        DropDownText(
          width: 150,
          height: 35,
          margin: EdgeInsets.only(left: 15),
          msg: '.png',
          list: controller.imageFormats,
          onPressed: (value) {
            controller.changeImageFormat(value);
          },
        ),
        SizedBox(
          width: 15,
        ),
        Text('编码质量'),
        Container(
            width: 130,
            alignment: Alignment.center,
            margin: EdgeInsets.only(left: 15),
            padding: EdgeInsets.symmetric(horizontal: 5),
            height: 35,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey, // 边框颜色
                width: 0.5, // 边框宽度
              ),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                    child: TextField(
                        controller: controller.textEditingController,
                        keyboardType: TextInputType.number,
                        cursorHeight: 15,
                        onChanged: (value) {},
                        decoration: InputDecoration(
                          hintText: '',
                          hintStyle:
                              TextStyle(fontSize: 14, color: Colors.grey),
                          contentPadding: EdgeInsets.only(bottom: 15),
                          border: InputBorder.none,
                        ))),
                Text('%')
              ],
            )),
      ],
    );
  }

  _chooseFile(PictureFormatChangeController controller) {
    return Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
      Text('输出目录'),
      Container(
          width: 500,
          alignment: Alignment.centerLeft,
          margin: EdgeInsets.only(left: 15),
          padding: EdgeInsets.symmetric(horizontal: 5),
          height: 35,
          decoration: BoxDecoration(
            border: Border.all(
              color: Colors.grey, // 边框颜色
              width: 0.5, // 边框宽度
            ),
          ),
          child: Row(
            children: [
              Text(controller.imagePath.value),
              Spacer(),
              Container(
                height: double.infinity,
                width: 0.5,
                color: Colors.grey,
              ),
              IconButton(
                  padding: EdgeInsets.zero,
                  onPressed: () {
                    controller.choosePicture();
                  },
                  icon: Image.asset(
                    Assets.imagesDirectory,
                    width: 20,
                  )),
            ],
          )),
      MyTextButton(
        text: "开始转换",
        backgroundColor: Colors.deepPurpleAccent,
        textStyle: TextStyle(color: Colors.white),
        margin: EdgeInsets.only(left: 15),
        confirm: () {
          controller.startTransform();
        },
      ),
    ]);
  }

  _choosePicture(PictureFormatChangeController controller) {
    return controller.imagePath.value.isEmpty
        ? InkWell(
            onTap: () {
              controller.choosePicture();
            },
            child: Container(
                width: windowWidth * 0.25,
                height: windowHeight * 0.2,
                margin: EdgeInsets.symmetric(vertical: 20),
                decoration: BoxDecoration(
                    border:
                        Border.all(width: 1, color: Colors.deepPurpleAccent)),
                alignment: Alignment.center,
                child: IconTextButton(onPressed: () {
                  controller.choosePicture();
                }, Icon(Icons.photo), Text('选择图片'))))
        : Container(
            margin: EdgeInsets.symmetric(vertical: 20),
            child: Column(
              children: [
                Stack(
                  alignment: Alignment.topRight,
                  children: [
                    Image.file(File(controller.imagePath.value),
                        width: windowWidth * 0.25),
                    InkWell(
                        onTap: () {
                          controller.delete();
                        },
                        child: Icon(
                          Icons.clear,
                          color: Colors.red,
                        ))
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                    child: Column(
                  children: [
                    _itemText('文件类型', controller.intPutImageFormat.value),
                    _itemText('文件位置', controller.imagePath.value),
                    _itemText('文件大小', controller.imageSize.value.toString()),
                  ],
                ))
              ],
            ));
  }

  _result(PictureFormatChangeController controller) {
    return controller.outputImagePath.value.isNotEmpty
        ? Container(
            margin: EdgeInsets.symmetric(vertical: 20),
            child: Column(
              children: [
                Stack(
                  alignment: Alignment.topRight,
                  children: [
                    Image.file(File(controller.outputImagePath.value),
                        width: windowWidth * 0.25),
                    InkWell(
                        onTap: () {
                          controller.delete(type: 1);
                        },
                        child: Icon(
                          Icons.clear,
                          color: Colors.red,
                        ))
                  ],
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                    child: Column(
                  children: [
                    _itemText('文件类型', controller.outputImageFormat.value),
                    _itemText('文件位置', controller.outputImagePath.value),
                    _itemText(
                        '文件大小', controller.outputImageSize.value.toString()),
                  ],
                ))
              ],
            ))
        : Container();
  }

  _itemText(String title, String content) {
    final textStyle = TextStyle(color: Colors.grey);
    return Container(
        width: windowWidth * 0.25,
        padding: EdgeInsets.symmetric(horizontal: 10),
        child: Row(
            // mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                title,
                style: textStyle,
              ),
              Spacer(),
              Text(
                content,
                style: textStyle,
              )
            ]));
  }
}
